<template>
	<el-dialog width="600px" title="认证资料" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<div class="flex idcard_wrap">
			<div class="flex-1">
				<p class="text-center img_header">身份证正面</p>
				<div class="img_wrap">
					<img v-if="idcard_front" :src="$globalObj.imgBaseUrl+idcard_front" class="w-100 h-100">
					<el-image-viewer v-if="showFront" :on-close="closeFront"
						:url-list="[$globalObj.imgBaseUrl+idcard_front]" />
				</div>
				<p class="text-center img_footer">
					<el-button size="mini" type="primary" @click="idcard_front&&(showFront=true)">查看大图</el-button>
				</p>
			</div>
			<div class="flex-1">
				<p class="text-center img_header">身份证反面</p>
				<div class="img_wrap">
					<img v-if="idcard_back" :src="$globalObj.imgBaseUrl+idcard_back" class="w-100 h-100">
					<el-image-viewer v-if="showBack" :on-close="closeBack"
						:url-list="[$globalObj.imgBaseUrl+idcard_back]" />
				</div>
				<p class="text-center img_footer">
					<el-button size="mini" type="primary" @click="idcard_back&&(showBack=true)">查看大图</el-button>
				</p>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="dialogVisible=false">关闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
	export default {
		components: {
			ElImageViewer
		},
		props: ['editItem'],
		data() {
			return {
				dialogVisible: false,
				showFront: false,
				showBack: false,
				idcard_back: '',
				idcard_front: ''
			}
		},
		methods: {
			// 关闭预览
			closeFront() {
				this.showFront = false;
			},
			closeBack() {
				this.showBack = false;
			}
		},
		watch: {
			dialogVisible(val) {
				if (val) {
					this.idcard_back = this.editItem.idcard_back;
					this.idcard_front = this.editItem.idcard_front;
				} else {
					this.idcard_back = '';
					this.idcard_front = '';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.idcard_wrap {
		border: 1px solid #eeeeee;

		&>div:first-child {
			border-right: 1px solid #eeeeee;
		}
	}

	.img_header {
		height: 40px;
		line-height: 40px;
		background: #f5f5f5;
		color: #666666;
		font-size: 16px;
	}

	.img_wrap {
		width: 250px;
		height: 150px;
		margin: 20px auto;
		background-color: #8f8f8f;
	}

	.img_footer {
		height: 40px;
		line-height: 40px;
		border-top: 1px solid #eeeeee;
	}

	.el-image-viewer__wrapper {
		z-index: 2500 !important;
	}
</style>
